{% extends 'index.html' %}
{% load custom_tag %}

{% block page-title %}
域名查询
{% endblock %}
{% block page-content %}

<div class="row">
     <div class="col-sm-6 col-lg-3">
        <div class="panel" style="height: 492px;">
            <div class="panel-heading">
                <h3 class="panel-title">域名列表</h3>
            </div>
            <div  class="panel-body " style="overflow: auto" >

                      <input style="margin-bottom: 5px" type="text" oninput="SearchDomain(this)" id="domain_search" class="form-control" placeholder="查找域名...">

                <div id="domain_list" style="">
                    <div style="margin-bottom:0;" class="list-group bg-trans">
                     {% for domain in all_domains %}

                         <a class="list-group-item" domain_id="{{ domain.id }}" href="javascript:void(0)" onclick=get_info({{ domain.id }}) >{{ domain.name }}({{ domain.host.ip_addr }})</a>

                     {% endfor %}
                     </div>
                </div>

            </div>
        </div>
     </div>

    <div class="col-sm-6 col-lg-9">
        <div class="panel">
             <div class="panel-heading">
                <h3 class="panel-title">域名信息</h3>
            </div>
            <div class="panel-body" id="domain_info">

            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block bottom-js %}
<script type="text/javascript">

    $(document).ready(function(){

        domain_list = {};
        $("#domain_list div").children().each(function(index){

          domain_list[$(this).attr("domain_id")] = $(this).text();
        });

        //$("#domain_list a[domain_id='" + "" + "']").prependTo("#domain_list div");
        //console.log($("#domain_list active")[0])


    });//end doc ready

    function SearchDomain(ele){

        var search_str = $(ele).val()
        var domain_list_html ='' ;

        $.each(domain_list,function(domain_id,val){
            if (val.indexOf(search_str) >-1){
                console.log(val);
                var html_row = "<a class='list-group-item' domain_id='" + domain_id + "' href='javascript:void(0)' onclick=get_info(" + domain_id + ") > " + val + "</a>";
                domain_list_html += html_row ;

            }

        });//end each

        $("#domain_list").html(domain_list_html);
    }
    function get_info(domain_id){
        var domain_id=domain_id;
        $.ajax({
            url: '/domain/',
            type: 'POST',
            data: {domain_id:domain_id},
            success: function (callback) {
                var domain_info=JSON.parse(callback);
                var html_ele='<div class="row" >\
                        <label class="col-md-2 control-label">域名(Domain)</label>\
                        <div  class="col-md-9 ">\
                            <b>'+domain_info.domain+'</b>\
                        </div>\
                    </div>\
                    <div class="row" >\
                        <label class="col-md-2 control-label">域名归属主机</label>\
                        <div  class="col-md-9 ">\
                            <b>'+domain_info.hostname+'</b>\
                        </div>\
                    </div>\
                    <div class="row" >\
                        <label class="col-md-2 control-label">IP</label>\
                        <div  class="col-md-9 ">\
                            <b>'+domain_info.ip+'</b>\
                        </div>\
                    </div>\
                    <div class="row" >\
                        <label class="col-md-2 control-label">所在机房</label>\
                        <div  class="col-md-9 ">\
                            <b>'+domain_info.idc+'</b>\
                        </div>\
                    </div>\
                    <div class="row" >\
                        <label class="col-md-2 control-label">归属账号</label>\
                        <div  class="col-md-9 ">\
                            <b>'+domain_info.account+'</b>\
                        </div>\
                    </div>\
                    <div class="row" >\
                        <label class="col-md-2 control-label">配置文件</label>\
                        <div  class="col-md-9 ">\
                            <b>'+domain_info.conf+'</b>\
                        </div>\
                    </div>'
                $('#domain_info').html(html_ele);
            }
        })

    }


</script>
{% endblock %}



